<template>
    <div>
		<panle title='用户管理' content="用户管理"></panle>
        <!--标签-->
        <div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="用户管理" name="first">
                    <div class="first_content">
                        <!--筛选条件-->
                       <div class="shaixuan">
                            <div >
                                <!--<el-input placeholder="搜索关键词" v-model="searchinput" class="input-with-select">-->
                                    <!--<el-select v-model="searchtype" slot="prepend" placeholder="请选择">-->
                                    <!--<el-option label="姓名" value="1" ></el-option>-->
                                    <!--<el-option label="昵称" value="2"></el-option>-->
                                    <!--</el-select>-->
                                    <!--<el-button slot="append" icon="el-icon-search" @click="search"></el-button>-->
                                <!--</el-input>-->

								<el-form :inline="true" ref="form" :model="form" v-model="searchinput" label-width="80px" style="margin: 20px;">
									<el-form-item label="昵称" prop="order_num">
										<el-input placeholder="请输入昵称" v-model="nickname"></el-input>
									</el-form-item>
									<el-form-item label="手机号" prop="tel">
										<el-input placeholder="请输入手机号" v-model="phone"></el-input>
									</el-form-item>

									<el-form-item>
										<el-button type="primary" @click="search" size="mini">搜索</el-button>
										<el-button @click="resetForm()" size="mini">重置</el-button>
									</el-form-item>
								</el-form>
                            </div>

							
                       </div>
					   <div class="first_table">
							
							<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all
							v-loading="loading" @selection-change="handleSelectionChange">
								<el-table-column type="selection" width="55"></el-table-column>
								<el-table-column prop="id" label="ID" width="55"></el-table-column>
								<!--<el-table-column prop="name" label="姓名"></el-table-column>-->
								<el-table-column prop="wx_avatarurl" label="头像">
									<template slot-scope="scope">
										<el-image :src="scope.row.wx_avatarurl" fit="fill" style="width: 60px;height: 60px;"></el-image>
									</template>
								</el-table-column>
								<el-table-column prop="nickname" label="昵称"></el-table-column>
								<el-table-column prop="phone" label="手机号"></el-table-column>
								<el-table-column prop="openid" label="openid"></el-table-column>
								<el-table-column prop="createtime" label="创建时间"></el-table-column>
								<!--<el-table-column prop="id" label="操作">-->
									<!--<template slot-scope="scope">-->
										<!--<PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil" perms="sys:role:edit" @click="edit(scope.row)"></PersButton>-->
										<!--<PersButton type="text" size="mini" icon="el-icon-delete" perms="sys:role:del" label="删除" @click="del(scope.row)"></PersButton>-->
									<!--</template>-->
								<!--</el-table-column>-->
							</el-table>
							<div class="block">
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber"
								:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper"
								:total="total">
								</el-pagination>
							</div>
					   </div>
					   <!--弹出层  添加数字人-->
					   <el-dialog v-dialogDrag :visible.sync="open" width="600px"  @close="dialogclose" append-to-body :title="!form.id ? '创建数字人' : '编辑数字人'">
							<el-form ref="form" :model="form" :rules="rules" label-width="80px">
								<el-row>
									<el-col :span="24">
										<el-form-item label="头像"  prop="touxiang_img">

											<div class="uploadcol">
												<div class="uploadborder">
													<img v-if="dialogImageUrl" :src="dialogImageUrl" width="100%" height="100%" />
													<img v-else src="../../../../assets/img/uploadimg.jpg" width="100%" height="100%" />

												</div>
												<el-button type="primary" @click="openUploadDialBg" size="mini" style="margin-top:10px">上传头像</el-button>
											</div>
										</el-form-item>
									</el-col>

									<el-col :span="24">
										<el-form-item label="昵称" prop="nick">
											<el-input style="width:50%" v-model="form.nick" placeholder="请输入昵称" size="small" />
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="类型" prop="flagid">
											<el-select v-model="form.flagid"  placeholder="请选择" size="small" style="width:150%">
												<el-option v-for="item in TypeData" :key="item.id" :label="item.name" :value="item.id">
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="评论" prop="pinglun">
											<el-input  type="textarea" v-model="form.pinglun" placeholder="请输入内容" size="small" />
										</el-form-item>
									</el-col>

								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button @click="open = false" size="small">取 消</el-button>
								<el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')" size="small">确 定</el-button>
							</div>
							<select-img :show="IsShowPicDig" @update="cleanDiaglog" :selectType="imgnum" @selectSure="selectImgs" :type="0"></select-img>
						</el-dialog>
                    </div>

					<!--弹出层  导入数字人-->
					<el-dialog v-dialogDrag :visible.sync="open2" width="600px"    append-to-body title="导入数字人">
							<el-row>
								<el-col :span="24">
									<input type="file" @change="handleChange" />
								</el-col>
								<el-col :span="24" style="display:flex;align-content:center;margin-top:20px;">
										<div style="width:80px;display:flex;line-height:30px;">类型</div>
											<el-select v-model="flagid2"  placeholder="请选择" size="small" style="width:150%">
												<el-option v-for="item in TypeData" :key="item.id" :label="item.name" :value="item.id">
												</el-option>
											</el-select>
									</el-col>
								<el-col :span="24" style="margin-top:20px;">
									<div class="daoru_txt">最大支持 10000 条记录（支持xlsx文件，大小请控制在 10MB 以内）</div>
								</el-col>
								<el-col :span="24" style="margin-top:20px;">
									<div>下载导入模版：<a href="https://un.tongshuzhijia.com/Uploads/shuziren/shuziren.xlsx" target="_blank">数字人导入模版.xlsx</a></div>
								</el-col>
								<el-col :span="24" style="margin-top:20px;">
									<!--<el-button type="primary" @click="daorushuziren" size="small">确认导入</el-button>-->
								</el-col>
							</el-row>
						</el-dialog>
                 
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
	import Panle from '@/components/Panle.vue';
	import PersButton from '@/components/PersButton.vue';
    import {getUserData} from '@/api/user/user';
	import SelectImg from '@/components/select-img.vue';
	import { hasPermission } from '@/common/permission'

    export default {
		components: {
			Panle,
			PersButton,
			SelectImg
		},
		data() {
			return {
				IsShowPicDig: false,
				headers: {"Content-Type": "multipart/form-data;charset=UTF-8"},
				file:null,
				loadinggroup: false,
				tableDatagroup: [],
				multipleSelectioncountgroup:0,
				pageSizegroup: 10, //一页显示多少条
				pageNumbergroup: 1,
				totalgroup: 0, //总页数
				searchinputgroup: '',
				fileList2:[],
				flagid2:'',
				filelist:[],
				multipleSelectioncount:0,
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
                TypeData:[],
                type:'-1',
                searchtype: '1',
                searchinput: '',
                activeName: 'first',
				loading: false,
				pageSize: 10, //一页显示多少条
				pageNumber: 1,
				total: 0, //总页数
				tableData: [],
				serachword: '',
				open: false,
				open2: false,
				form: {
					"id": '',
					"touxiang_img": '',
					"nick": "",
					"flagid": '',
					"pinglun": '',
				},
				rules: {
					
					flagid: [{
						required: true,
						message: "类型不能为空",
						trigger: "blur"
					}],
					pinglun: [{
						required: true,
						message: "评论不能为空",
						trigger: "blur"
					}],
				},

				opengroup: false,
				formgroup: {
					"id": '',
					"name": "",
					"remark": '',
				},
				rulesgroup: {
					
					name: [{
						required: true,
						message: "类型不能为空",
						trigger: "blur"
					}],
					remark: [{
						required: true,
						message: "评论不能为空",
						trigger: "blur"
					}],
				},

				clickType: false,
				imgnum: 1, //选择图片数量
				nickname: '', //选择图片数量
				phone: '', //选择图片数量
			}
		},
		created() {
			this.init();
		},
		methods: {
			hasPermission,
			handleAvatarSuccess(res, file) {
				console.log(file);
				this.dialogImageUrl = URL.createObjectURL(file.raw);
			},
			handleChange(event){
				this.file = event.target.files[0];
				console.log(this.file);
			},
            handleClick(tab, event) {
                console.log(tab, event);
            },
			init: function() {
				this.loading = true;
				let _param = {
					"size": this.pageSize,
					"page": this.pageNumber,
					"type": this.searchtype,
					"input": this.searchinput,
					"nickname": this.nickname,
					"phone": this.phone,
					"flag": this.type
				}
				// getShuZiRenData(_param).then((res)=>{
                getUserData(_param).then((res)=>{
					console.log(res);
					this.tableData = res.data.list;
					this.total = res.data.total;
					this.loading = false;
				})
                // getShuZiRenType().then((res)=>{
					// console.log(res);
                //     this.TypeData = res.data;
                // })
			},
			search: function() {
				this.searchinput = this.searchinput;
				this.init();
			},
            resetForm() {
                this.nickname = '';
                this.phone= '';
                this.init();
            },
			typechange:function(e){
				console.log(e);
				this.flag = e;
				this.init();
			},
			handleSizeChange: function(e) {
				console.log(e);
				this.pageSize = e;
				this.init();
			},
			handleCurrentChange: function(e) {
				console.log(e);
				this.pageNumber = e;
				this.init();
			},
			//已选
			handleSelectionChange: function(e) {
				console.log(e);
				let selectChang = []
				for (let item of e) {
					selectChang.push(item.id)

				}
				this.multipleSelection = selectChang;
				this.multipleSelectioncount = selectChang.length;
				console.log(selectChang);
			},
			//创建表单
			createdShuziren:function(e){
				this.form = {
					"id": '',
					"touxiang_img": '',
					"nick": "",
					"flagid": '',
					"pinglun": '',
				},
				this.open = true;
			},
			//提交表单  创建 
			submitForm: function(e) {
				console.log(e);
				this.form.touxiang_img = this.dialogImageUrl;

					
				
			},
			subEditForm:function(e){
				console.log(e);
				this.form.touxiang_img = this.dialogImageUrl;

			},

			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
			del: function(data) {
				this.$confirm('确定删除【' + data.nick + '】数字人吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let _param={
						'id':data.id
					}



				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			edit: function(data) {

				this.form.id = data.id;
				this.dialogImageUrl = data.touxiang_img;
				this.filelist = [{'name':'','url':this.dialogImageUrl}];
				console.log(this.filelist);
				let editForm = {
					"id": data.id,
					"nick": data.nick,
					"touxiang_img": data.touxiang_img,
					"flagid": data.flagid,
					"pinglun": data.pinglun,
					
				}
				Object.assign(this.form, editForm);
				this.open = true;
			},
			//批量删除
			piliangshanchu:function(e){
				this.$confirm('确定批量删除选中的数字人吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let _param={
						'ids':this.multipleSelection
					}



				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//单文件提示，超出数量
			exceed:function(e){
				this.msgError('图片只能上传一个');
			},
			//监听关闭弹窗
			dialogclose:function(e){
				this.filelist = [];
				this.form={
					"id": '',
					"touxiang_img": '',
					"nick": "",
					"flagid": '',
					"pinglun": ''
				};
			},

			daoru:function(e){
				this.open2 = true;
			},
			handleRemove2(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview2(file) {
				console.log(file);
			},
			handleExceed2(files, fileList) {
				this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove2(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},


		/*************************     数字人类型                  ****************************** */

			searchgroup: function() {
				this.searchinputgroup = this.searchinputgroup;
			},
			handleSizeChangegroup: function(e) {
				console.log(e);
				this.pageSizegroup = e;
			},
			handleCurrentChangegroup: function(e) {
				console.log(e);
				this.pageNumbergroup = e;
			},
			//已选
			handleSelectionChangegroup: function(e) {
				console.log(e);
				let selectChang = []
				for (let item of e) {
					selectChang.push(item.id)

				}
				this.multipleSelectiongroup = selectChang;
				this.multipleSelectioncountgroup = selectChang.length;
				console.log(selectChang);
			},
			//创建表单
			createdShuzirengroup:function(e){
				this.formgroup = {
					"id": '',
					"name": '',
					"remark": "",
				},
				this.opengroup = true;
			},


			editgroup: function(data) {

				this.formgroup.id = data.id;
				let editForm = {
					"id": data.id,
					"name": data.name,
					"remark": data.remark,
					
				}
				Object.assign(this.formgroup, editForm);
				this.opengroup = true;
			},
			chakangroup:function(e){
				this.activeName = 'first';
				this.type = e.id;
				this.init();
			},
			selectImgs: function (res) {

				console.log(res);
				this.IsShowPicDig = true;
				this.dialogImageUrl = res[0].urls
			},
			cleanDiaglog: function (shows) {
				this.IsShowPicDig = false;
        },
		openUploadDialBg: function () {

			this.IsShowPicDig = true;
		},

		}
	}

</script>

<style lang="scss" scoped>
  @import "@/assets/css/common";

  .uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
  }

  .uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 100px;
    height: 100px;
  }

  .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .shaixuan{
    display:flex;
	flex-flow:nowrap;
    align-content:center;
	margin-top: 15px;
  }

  .first_content{
	display:flex;
	flex-flow:nowrap;
	flex-direction:column;
	align-content:center;
  }

  .uploadcol {
		display: flex;
			flex-flow: column;
			width: 100px;
		}
	
  .uploadborder {
  	border: 1px dashed #d9d9d9;
  	border-radius: 6px;
  	/* cursor: pointer;
      position: relative;
      overflow: hidden; */
  	width: 100px;
  	height: 100px;
  }

  .addshuziren_btn{
	position: absolute;
    right: 0;
	margin-right: 20px;
  }

  .daorushuziren_btn{
	position: absolute;
    right: 0;
	margin-right: 160px;
  }

  .yixuan{
	margin: 20px;
	color: #787878;
  }

</style>